<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>编译中梦见未来</title>
    <style>
        :root {
            --background-color: #2c3e50;
            --loader_color: #34495e;
            --circle_color: #7591ad;
            --rotate_color: #ec3e27;
        }

        * {
            margin: 0;
            padding: 0;
        }

        html {
            font-size: 14px;
        }

        body {
            width: 100vw;
            height: 100vh;
            background-color: var(--background-color);
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .container {
            width: 90px;
            height: 90px;
            background-color: var(--loader_color);
            margin: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .loader1 {
            width: 33px;
            height: 33px;
            border: 4px solid #fff;
            border-bottom-color: red;
            border-radius: 50%;
            animation: rotate 1s linear infinite;
        }

        .loader2 {
            position: relative;
            width: 33px;
            height: 33px;
            border-radius: 50%;
            border: 4px solid var(--circle_color);
            display: flex;
            align-items: center;
            justify-content: center;
            animation: rotate 1s linear infinite;
        }

        .loader2::after {
            position: absolute;
            content: "";
            width: 44px;
            height: 44px;
            border: 2px solid transparent;
            border-bottom-color: palegreen;
            border-radius: 50%;
        }

        .loader3 {
            position: relative;
            width: 33px;
            height: 33px;
            border-radius: 50%;
            border: 4px solid var(--circle_color);
            animation: rotate 1s linear infinite;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .loader3::before {
            position: absolute;
            content: "";
            width: 44px;
            height: 44px;
            border: 2px solid transparent;
            border-bottom-color: var(--rotate_color);
            border-top-color: var(--rotate_color);
            border-radius: 50%;
        }

        .loader4 {
            position: relative;
            width: 33px;
            height: 33px;
            border-radius: 50%;
            border: 4px solid var(--circle_color);
            animation: rotate 1s linear infinite;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .loader4::before {
            position: absolute;
            content: "";
            width: 22px;
            height: 22px;
            border: 2px solid transparent;
            border-bottom-color: var(--rotate_color);
            border-radius: 50%;
        }

        .loader5 {
            position: relative;
            width: 33px;
            height: 33px;
            border-radius: 50%;
            border: 4px solid var(--circle_color);
            animation: rotate 1s linear infinite;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .loader5::before {
            position: absolute;
            content: "";
            width: 22px;
            height: 22px;
            border: 2px solid transparent;
            border-bottom-color: var(--rotate_color);
            border-top-color: var(--rotate_color);
            border-radius: 50%;
        }

        @keyframes rotate {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }
    </style>
</head>

<body>

    <div class="container">
        <div class="loader1"></div>
    </div>
    <div class="container">
        <div class="loader2"></div>
    </div>
    <div class="container">
        <div class="loader3"></div>
    </div>
    <div class="container">
        <div class="loader4"></div>
    </div>
    <div class="container">
        <div class="loader5"></div>
    </div>
</body>

</html>